<template>
  <div class="myorder">
    <van-tabs
      v-model="active"
      animated
    >
      <van-tab
        v-for="order in orderlist"
        :key="order.id"
      >
        <template #title>
          <div @click="itemid(order.isdel)">{{ order.label }}</div>
        </template>
        <!-- 内容 -->
        <div v-if="goodslist.length>=1">
          <div
            class="card_box"
            v-for="item in goodslist"
            :key="item.id"
            @click="iteminfo(item.id)"
          >
            <van-card
              :num="item.count"
              :price="item.price+'.00'"
              :title="item.title"
              :thumb="item.img"
            />
          </div>
        </div>
        <div
          class="no_card"
          v-else
        >
          没有更多了
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { getorderlist } from '../../api/article'

export default {
  data() {
    return {
      goodslist: [],
      orderlist: [],
      active: 0
    }
  },
  methods: {
    async allgoods() {
      const list = JSON.parse(localStorage.goodsinfo || '[]')
      const { userid } = JSON.parse(localStorage.userlist)
      const orderlist = await getorderlist()
      if (orderlist.data.length >= 1) {
        this.orderlist = orderlist.data
      } else {
        this.orderlist = []
      }
      if (list.length >= 1) {
        const idgoodslist = list.filter(item => {
          return item.userid === userid
        })
        this.goodslist = idgoodslist
      } else {
        this.goodslist = []
      }
    },
    itemid(id) {
      const list = JSON.parse(localStorage.goodsinfo || '[]')
      const { userid } = JSON.parse(localStorage.userlist)
      if (list.length >= 1) {
        const idgoodslist = list.filter(item => {
          return item.userid === userid
        })
        this.goodslist = idgoodslist
        const newsgoodslist = this.goodslist.filter(item => {
          if (id !== 0) {
            return item.status === id
          }
          return item
        })
        this.goodslist = newsgoodslist
      } else {
        this.goodslist = []
      }
    },
    iteminfo(id) {
      this.$router.push({
        path: '/myorder-edit',
        query: {
          type: 'edit',
          id: id
        }
      })
    }
  },
  created(id) {
    this.allgoods()
  }
}
</script>
<style lang="scss">
.myorder {
  .van-tab__pane {
    .card_box {
      padding: 5px 10px;

      .van-card__title {
        margin-top: 10px;
        font-size: 14px;
        display: block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .van-card__bottom {
        font-size: 12px;

        .van-card__price {
          font-size: 14px;
          color: red;
        }
      }
    }

    .no_card {
      text-align: center;
      height: 50px;
      line-height: 50px;
    }
  }
}
</style>
